<template>
  <div>
    <div class="main-box main-boxa">
      <HeadTitle :title="title"/>
      <div class="tabs-content tabs-a-con" data-tabs-content='tabs1'>
        <div class="tabs-panel is-active" id="par1">
          <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :auto-fill="autoFill" :bottom-all-loaded="allLoaded" @bottom-status-change="handleBottomChange">
            <ul class="channel">
              <li v-for="(budget, index) in budgetList" :key="index">
                <a :href="budget.url">{{budget.name}}</a>
              </li>
            </ul>
            <div slot="bottom" class="mint-loadmore-bottom">
              <span v-show="bottomStatus !== 'loading'" :class="{ 'rotate': bottomStatus === 'drop' }">↓释放加载</span>
              <span v-show="bottomStatus === 'loading'">加载中...</span>
            </div>
          </mt-loadmore>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  import HeadTitle from '../../components/HeadTitle/HeadTitle'
  import {reqBudget} from '../../api/index'
  import commonJs from '../../assets/js/commonJs'

  export default {
    name: "Budget",
    components: {
      HeadTitle
    },
    data() {
      return {
        title: '预决算信息',
        budgetList: [],
        pageNum: 1,
        pageSize: 10,
        bottomStatus: '',
        autoFill: false,
        allLoaded: false
      }
    },
    mounted() {
      this.loadList();
    },
    methods: {
      loadBottom() {
        this.pageNum++;
        this.loadList();
      },
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      async loadList() {
        let {pageNum, pageSize} = this;
        let result = await commonJs.openAjax(reqBudget(pageNum, pageSize), true, true);
        if (result.code == 0) {
          this.budgetList = [...this.budgetList, ...result.data];
          if (result.totalPage == this.pageNum) {
            this.allLoaded = true;
          }
        }
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }
</script>

<style scoped>
  ul li a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .tabs-title {
    margin-left: 10px !important;
  }
</style>
